<template>
  <view class="consult">
    <navBar :navbarData.sync="navbarData"></navBar>
    <loading :showLoaded.sync="showLoaded"></loading>
    <view class="con-container">
      <image :src="cousultInfo.codeImgUrl" mode="widthFix" show-menu-by-longpress="true" @load="loadSuccess"></image>
      <view class="des" v-if="cousultInfo.detail">
        <view class="title">邀请详情</view>
        <view class="text">{{cousultInfo.detail}}</view>
      </view>
      <view class="button-container" :class="[isIpx ? 'fix-iphonex-button' : '']">
        <view class="button_text" :class="cousultInfo.isAccept?'grey':''" @click="openDialog(buttonText)">{{buttonText}}
        </view>
      </view>
    </view>
    <view class="dialog" v-if="dialog">
      <view class="content">
        <view class="text">
          接受邀约后，专属顾问将会通过企业微信向您会员手机号发起微信好友申请，请关注微信好友申请消息。 </view>
        <view class="dia-button">
          <view class="cancel" @click="refuse">取消</view>
          <view class="accept" @click="accpectInvite">同意</view>
        </view>
      </view>
    </view>
		<!-- 弱提示 弹窗 -->
		<toast-popup ref="toastPopup" @onToastPopupClick="onToastPopupClick"></toast-popup>
  </view>
</template>

<script>
  import api from '@/api/api';
  import Loading from '@/components/common/loading';
  import NavBar from '@/components/common/navbar';
  import {
    SYSTEM_INFO,
    USER_INFO,
    CUSTOMER_INFO,
    MERCHANT_INFO
  } from '@/utils/constant';
  export default {
    components: {
      navBar: NavBar,
      loading: Loading,
    },
    data() {
      return {
        navbarData: {
          showCapsule: 1, //是否显示左上角图标   1表示显示    0表示不显示
          navbarTitle: '顾问邀约',
          hideSearch: true,
          hideHome: false
        },
        cousultInfo: {},
        activityId: '',
        activityName: '',
        buttonText: '接受邀约',
        dialog: false,
        showLoaded: true,
        isIpx:false,
        nowPages:'',
      }
    },
    onLoad(option) {
      this.activityId = option.id
      this.activityName = option.name
      let systemInfo = uni.getSystemInfoSync();
      let isIpx = systemInfo.model.indexOf('iPhone X') !== -1 || systemInfo.model.indexOf('iPhone1') !== -1 ||
        systemInfo.model.indexOf('unknown<iPhone13') !== -1 || systemInfo.model.indexOf('iPhone 12/13') !== -1;
      this.isIpx = isIpx;
      this.getConsultantInfo()
      let pages = getCurrentPages();
      let currPage = pages[pages.length - 1];
      this.nowPages = currPage.route;
    },
    onShow() {
      getApp().cl_tracker.track('mini_program_view', {
            path:  this.nowPages,
            pageName: '顾问邀约',
          })
    },
    methods: {
			/**
			 * 展示弱提示
			 * @param {Object} msg 文案
			 */
			handleShowTextToast(msg){
				try{
					this.$refs.toastPopup.showToast(msg);
				}catch(e){}
			},
			/**
			 * 若提示按钮点击回调
			 * @param {Object} data.type 类型：confirm确定，cancel取消
			 * @param {Object} data.callBackData 呼气弹窗时传入的数据
			 */
			onToastPopupClick(data){},
			refuse(){
				this.dialog = false
				this.trackAgreeResult("拒绝")
				this.$commonSensors.popupEvent('PopupClick', {'popup_type' : '会员权益', 'popup_name': '顾问邀约弹窗', 'button_name': '取消'})
			},
			trackAgreeResult(result){
				let trackParams = {
					"c_answer": result
				}
				getApp().commonClTrack("c_ebmp_treatment_consultant_agree_result", trackParams);
			},
      loadSuccess(){
        this.showLoaded = false
      },
      async getConsultantInfo() {
        let customerInfo = uni.getStorageSync(CUSTOMER_INFO);
        let memberDetails = uni.getStorageSync('memberDetails') || getApp().globalData.memberDetails;
        const res = await api.getConsultantInfo({
          header: {
            jwt: customerInfo.jwt
          },
          query: {
            mobile: memberDetails.mobile
          }
        }, this.activityId);
        if (res.code == 1000) {
          this.cousultInfo = res.data
          if (res.data.isAccept) {
            this.buttonText = '已接受邀请'
          } else {
            this.buttonText = '接受邀约'
          }
        } else {
          this.handleShowTextToast(res.msg)
        }
      },
      openDialog(text) {
        if (text == '接受邀约') {
          getApp().commonClTrack("c_ebmp_treatment_consultant_agree", {});
          // this.$commonSensors.simpleTrack('ConsultantInvitationClick')
          this.$commonSensors.consultantInvitationClick(this.activityName)
          this.dialog = true
          this.$commonSensors.popupEvent('PopupExposure', {'popup_type' : '会员权益', 'popup_name': '顾问邀约弹窗'})
        }
      },
      async accpectInvite() {
        let customerInfo = uni.getStorageSync(CUSTOMER_INFO);
        let memberDetails = uni.getStorageSync('memberDetails') || getApp().globalData.memberDetails;
        let merchantInfo = uni.getStorageSync(MERCHANT_INFO) || getApp().globalData.merchantInfo;
        this.trackAgreeResult("允许");
		const res = await api.accpectInvite({
          method: 'POST',
          header: {
            jwt: customerInfo.jwt
          },
          query: {
            adviserActivityId: this.activityId,
            adviserActivityTitle: this.activityName,
            memberId: memberDetails.memberId,
            memberLevelId: memberDetails.memberLevelId,
            memberLevelName: memberDetails.memberLevel.levelName,
            mobile: memberDetails.mobile,
            storeId: merchantInfo.cloudMerchantStoreId
          }
        });
        if (res.code == 1000) {
          this.getConsultantInfo()
          this.dialog = false
          this.handleShowTextToast('确认成功')
        } else {
          this.handleShowTextToast(res.msg)
        }
        this.$commonSensors.popupEvent('PopupClick', {'popup_type' : '会员权益', 'popup_name': '顾问邀约弹窗', 'button_name': '同意'})
        // this.$commonSensors.consultantInvitationClick(this.activityName)
      },
    }
  }
</script>

<style lang="scss">
  page {
    background: #F7F6F4;

    .con-container {
      padding-bottom: 244rpx;
    }

    image {
      margin: 72rpx 72rpx 36rpx;
    }

    .des {
      margin: 0 72rpx;

      .title {
        color: #1A1A1A;
        font-size: 30rpx;
        font-weight: bold;
        margin-bottom: 6rpx;
      }

      .text {
        color: #6C6C6B;
        font-size: 24rpx;
        line-height: 48rpx;
      }
    }

    .button-container {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      &.fix-iphonex-button{
        bottom: 0 !important;
        padding-bottom: 40rpx;
        background: #fff;
      }
    }

    .button_text {
      &.grey {
        background: #AEAEAE;
      }
      background: #000;
      color: #fff;
      font-size: 32rpx;
      padding: 34rpx 0;
      text-align: center;
    }

    .dialog {
      position: fixed;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      background: rgba(000, 000, 000, 0.6);

      .content {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 570rpx;
        background-image: url('https://100000063-1252208446.file.myqcloud.com/images/diabg.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;

        .text {
          font-size: 26rpx;
          color: #333333;
          width: 636rpx;
          line-height: 46rpx;
          margin: 144rpx 56rpx 90rpx;

        }

        .dia-button {
          display: flex;
          justify-content: space-evenly;

          .cancel {
            height: 74rpx;
            width: 184rpx;
            border: 1px solid #979797;
            font-size: 28rpx;
            color: #333;
            text-align: center;
            line-height: 74rpx;
          }

          .accept {
            height: 74rpx;
            width: 184rpx;
            border: 1px solid #000;
            font-size: 28rpx;
            color: #fff;
            background: #000;
            text-align: center;
            line-height: 74rpx;
          }
        }
      }
    }
  }
</style>
